<template>
  <div id="login">
    <div><h2>登录系统</h2></div>
    <div class="content">
      <el-input placeholder=" " class="number" v-model="l_zhanghao">
        <template slot="prepend">账号</template>
      </el-input>

      <el-input placeholder=" " class="number" v-model="l_mima">
        <template slot="prepend">密码</template>
      </el-input>

      <el-button type="success" class="login" plain>登录</el-button>

      <div class="godenglu"><a  @click="godenglu()">已有账号,去登录</a></div>
    </div>

  </div>


</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
        input1: '',
        input3: ''
      }
    },
    created: function () {
      this.$http.jsonp('https://suggest.taobao.com/sug?code=utf-8&q=%E5%8D%AB%E8%A1%A3&callback=cb', {},
        {
          headers: {},
          emulateJSON: true
        }).then((response) => {
        console.log(response.data);
      });
    },
    methods:{
      godenglu:function () {
//        this.router.path="/regist"
        this.$router.push("/regist");
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html {
    background-color: #2d3a4b;
  }

  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .content {
    width: 30%;
    margin: 0 auto;


  }

  .number:nth-child(2) {
    margin-top: 35px;
  }

  .login {
    width: 100%;
    margin-top: 10%;
  }
  #login{
    margin-top: 10%;
  }
  h2{
    margin-bottom: 40px;
  }

  .godenglu{
    text-align: right;
    padding-right: 10px;
    margin-top: 20px;
  }

  .godenglu a{
    text-decoration:underline;
    cursor: pointer;
  }
</style>
